<template>
  <div>
    <div class="infoone">
        <el-carousel height="590px" style="width: 98%;padding-top: 1.25rem;border-radius: 0.8rem;margin-left: 1%;">
          <el-carousel-item v-for="item in 4" :key="item">
            <img src="../assets/img/flogo.png" width="100%" style="border-radius: 0.5rem;" />
            <h3 class="small">{{ item }}</h3>
          </el-carousel-item>
        </el-carousel>
      </div>
    <!-- 精品课程 -->
    <div class="jingpinkecheng">
      <h4 class="headtitle">精品课程</h4>
      <div class="coursed1" v-for="course  in this.suptercourselist">
        <div class="coursed2">
          <div alt="课程封面">
            <img @click="tocourseinfo(course.id)" class="coursecover" alt="课程封面" :src="course.cover" width="100%" height="200"/>
          </div>
          <div class="smallbox" @click="tocourseinfo(course.id)">
            <div class="courseflag">
              <div class=""><span class="" style="background: rgb(203, 162, 101);">国家精品</span></div>
            </div>
            <div class="coursetitle1">
              <div class="coursetitle2">
                <span @click="tocourseinfo(course.id)" class="coursetitle3" :title="course.title">{{course.title}}</span>
                <!-- <p class="">北京大学</p> -->
                <div class="teachername"><p style="display: inline-block;">{{course.teacherName}}</p>
                <p style="display: inline-block;margin-right: 4rem;" class="countjoin1">{{course.count}}人参加</p></div>
              </div>
              <div class="countjoin">
                <!--    <div class=""><img
                    src="//edu-image.nosdn.127.net/dca8dfe49d4a40ce998a50fff4ba57a2.png?imageView&amp;quality=100&amp;thumbnail=48y48"
                    class="" alt="进度图标">进行至第4周</div> -->
              </div>
            </div>
          </div>

        </div>
      </div>
      <h6 style="text-align: center;color: #DAA520;"><router-link style="color: #DAA520;" to="/course">更多课程</router-link></h6>
    </div>
    <!-- 名师讲坛 -->
    <div class="allwupercher">
      <h4 class="headtitle">名师讲坛</h4>
      <div class="supertecher" v-for="teacher in superteacherlist">
        <img class="teacherimg"
          :src="teacher.avatar">
          <div class="bagcard">
            <div class="teachercard">
              <p class="teachername1">{{teacher.name}}</p>
              <p class="teacheinfo">
                {{teacher.intro}}
              </p>
              <!-- <p class="V-01B">来自《大学计算机基础》</p> -->
            </div>
          </div>
      </div>
     <h6 style="text-align: center;"><router-link style="color: #DAA520;" to="/teacher">更多名师</router-link></h6>
    </div>


  </div>


  <!-- <Tutorial/> -->
  </div>
</template>

<script>
  import teacher from '@/api/edu/teacher/teacher'
  export default {
    name: 'IndexPage',
    data(){
      return{
        suptercourselist: [],
        superteacherlist: [],
      }
    },
    created(){
      this.getsupercouselistx()
      this.gettensuperteacherlist()
    },
    methods:{
      //获取10个名师讲坛
      gettensuperteacherlist(){
        teacher.getsuperteacherlistoften().then(response =>{
          this.superteacherlist=response.data.data.eduTeacherList
        })
      },
      //页面条状
      tocourseinfo(courseidz){
        this.$router.push({
          name:'course-courseid',
          params:{
            courseid: courseidz,
            cc: 111
          }
        })
      },
      getsupercouselistx(){
        teacher.getsupercourselist().then(response =>{
          this.suptercourselist=response.data.data.supercourselist
          console.log('测试精品课程：',this.suptercourselist)
        })
      }
    }
  }
</script>
<style>
  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }

  .infoone {
    border-radius: 0.1875rem;
    background-image: linear-gradient(-225deg, #E3FDF5 0%, #FFE6FA 100%);
  }

  .jingpinkecheng {
    margin-top: 0.9125rem;
    height: 51.25rem;
    background-image: linear-gradient(-225deg, #E3FDF5 0%, #FFE6FA 100%);

  }
  .headtitle{
    margin-top: 0.125rem;
    margin-bottom: 0rem;
    text-align: center;
  }
  .coursed1 {
    width: 20%;
    height: 26.25rem;
    margin-top: 0.275rem;
    /* background-color: #99A9BF; */
    display: inline-table;
  }

  .coursed2 {
    width: 90%;
    margin-left: 5%;
    margin-top: 0.9375rem;
    border-radius: 0.935rem;
    height: 6.25rem;
     background-image: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%);
  }

  /* .coursed2:hover{
    width: 90%;
    margin-left: 5%;
    margin-top: 0.9375rem;
    border-radius: 0.55rem;
    height: 12.05rem;
    box-shadow: darkgray 0.3125rem 0.125rem  0.7125rem  0.6125rem;
  } */
  .coursecover{
    transform-style: preserve-3d;
    transition: all 1s;
  }
  .coursecover:hover{
    transform-style: preserve-3d;
    transition: all 1s;
    border-radius: 100%;
  }
  .smallbox{
    border-radius: 0.205rem;height: 5.25rem;background-image: linear-gradient(to right, #c1c161 0%, #c1c161 0%, #d4d4b1 100%);
  }
  .coursetitle1 {
    font-size: small;
    margin-left: 0.1925rem;
  }
  .coursetitle2{

  }
  .coursetitle3{
    margin: 0rem;
  }

  .teachername {
    font-size: smaller;
    color: #7F828B;
  }

  .countjoin {
    font-size: smaller;
    color: #7F828B;
    margin-bottom: 0.0625rem;
  }

  .countjoin1 {
    margin-bottom: 0.0625rem;
  }
  .teacherimg{
    width: 4.125rem;
    height: 4.125rem;
    border-radius: 100%;
    margin-bottom: -2.4375rem;
    -webkit-transition: -webkit-transform 2s ease-out;

  }
  .teacherimg:hover{
    width: 4.125rem;
    height: 4.125rem;
    border-radius: 100%;
    margin-bottom: -2.4375rem;
    transform: rotateY(360deg);
      -webkit-transform: rotateY(360deg);
      -moz-transform: rotateY(360deg);
      -o-transform: rotateY(360deg);
      -ms-transform: rotateY(360deg);

  }
  .bagcard{
    width: 96%;
    background-image: linear-gradient(to right, #c1c161 0%, #c1c161 0%, #d4d4b1 100%);
    margin-left: 2%;
    margin-right: 2%;
    border-radius: 0.6125rem;

  }
  .bagcard:hover{
    width: 96%;
    background-image: linear-gradient(to right, #c1c161 0%, #c1c161 0%, #d4d4b1 100%);
    margin-left: 2%;
    margin-right: 2%;
    border-radius: 0.6125rem;
    box-shadow: #7F828B 0.3125rem 0.375rem 0.25rem;


  }
  .teachercard{

  }
  .allwupercher{
    margin-top: 8.25rem;
    background-image: linear-gradient(to top, #dfe9f3 0%, white 100%);
  }
  .teacheinfo{
    font-size: smaller;
    padding: 0.3125rem;
  }
  .supertecher{
    width: 25%;
    height: 12.5rem;
    /* background-color: #FF0000; */
    display: inline-table;
  }
  .teachername1{
    padding-left: 4.125rem;
  }


</style>
